import React from "react";
import { Table, Tag } from "antd";
import {
  ThunderboltOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
} from "@ant-design/icons";

const MagicHistory = () => {
  // 模拟数据
  const mockData = [
    {
      key: "1",
      date: "2024-03-20 10:00",
      type: "gain",
      amount: 50,
      description: "完成每日任务",
    },
    {
      key: "2",
      date: "2024-03-20 09:30",
      type: "loss",
      amount: 20,
      description: "使用魔法技能",
    },
    {
      key: "3",
      date: "2024-03-19 15:00",
      type: "gain",
      amount: 100,
      description: "首次登录奖励",
    },
  ];

  const columns = [
    {
      title: "时间",
      dataIndex: "date",
      key: "date",
    },
    {
      title: "类型",
      dataIndex: "type",
      key: "type",
      render: (type) => (
        <Tag color={type === "gain" ? "green" : "red"}>
          {type === "gain" ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
          {type === "gain" ? "获得" : "消耗"}
        </Tag>
      ),
    },
    {
      title: "数量",
      dataIndex: "amount",
      key: "amount",
      render: (amount, record) => (
        <span style={{ color: record.type === "gain" ? "#52c41a" : "#f5222d" }}>
          {record.type === "gain" ? "+" : "-"}
          {amount}
        </span>
      ),
    },
    {
      title: "描述",
      dataIndex: "description",
      key: "description",
    },
  ];

  return (
    <div className="magic-history">
      <div style={{ display: "flex", alignItems: "center", marginBottom: 16 }}>
        <ThunderboltOutlined
          style={{ fontSize: 20, color: "#722ed1", marginRight: 8 }}
        />
        <h3>魔力值记录</h3>
      </div>
      <Table
        columns={columns}
        dataSource={mockData}
        pagination={false}
        size="small"
      />
    </div>
  );
};

export default MagicHistory;
